<template>
  <view class="recordMge-modal" v-if="visible">
    <view class="modal-body">
      <view class="modal-title" :style="{ background: record.iconColor }">
        <i class="icon iconfont" :class="record.icon"></i>
        <span class="tag-name">{{ record.tagName }}</span>
      </view>
      <view class="record-info">
        <view class="record-amount">
          {{ record.type === '支出' ? '-' : '+' }}{{ record.amount }}
        </view>
        <span class="record-remark">{{ record.remark }}</span>
        <span class="record-time">{{ record.recordTime }}</span>
      </view>
      <view class="modal-footer">
        <i class="icon iconfont icon-edit" @click="onClickEdit"></i>
        <i class="icon iconfont icon-delete" @click="onClickDelete"></i>
      </view>
    </view>
    <view class="modal-close" @click="onclose"></view>
  </view>
</template>
<script lang="ts">
import { recordItem } from '@/type/records'
import Vue from 'vue'
export default Vue.extend({
  name: 'recordMgr',
  data() {
    return {
      visible: false,
      record: {} as recordItem,
    }
  },
  methods: {
    open(record: recordItem) {
      this.visible = true
      this.record = record
    },
    onclose() {
      this.visible = false
    },
    onClickEdit() {
      uni.navigateTo({
        url:
          '/pages/records/recordSave?record=' +
          encodeURIComponent(JSON.stringify(this.record)),
      })
      this.onclose()
    },
    onClickDelete() {
      this.$confirm('确认删除吗，删除后不可恢复', '删除帐单', {
        confirmText: '确认',
        cancelText: '取消',
        onConfirm: () => {
          this.$api.delRecordsByIdApi(null, this.record.id).then((res: any) => {
            if (res.code === 1) {
              uni.showToast({ title: '删除成功！' })
              this.onclose()
              this.$emit('update', true)
            }
          })
        },
        onCancel: () => {
          console.log(89)
        },
      })
    },
  },
})
</script>
<style lang="less" scoped>
.recordMge-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(1, 1, 1, 0.4);
  z-index: 2021;
  overflow: auto;
  .modal-body {
    background: #fff;
    height: auto;
    margin: 25vh 48rpx auto;
    border-radius: 40rpx;
    .modal-title {
      border-top-left-radius: 40rpx;
      border-top-right-radius: 40rpx;
      height: 100rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #fff;
      .iconfont {
        font-size: 36rpx;
        margin-right: 10rpx;
      }
      .tag-name {
        font-size: 28rpx;
      }
    }
    .record-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40rpx 30rpx 30rpx;
      box-sizing: border-box;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 1px;
        background-image: linear-gradient(
          to right,
          #ccc 0%,
          #ccc 50%,
          transparent 50%
        );
        background-size: 20rpx 1rpx;
        background-repeat: repeat-x;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .record-amount {
        font-size: 36rpx;
        font-weight: bold;
      }
      .record-remark {
        margin-top: 30rpx;
        font-size: 28rpx;
        color: #9d9d9d;
      }
      .record-time {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #ccc;
      }
    }
  }
  .modal-footer {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    position: relative;
    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 40rpx;
      background: #919295;
      position: absolute;
      top: -20rpx;
    }
    &::before {
      border-radius: 0 20rpx 20rpx 0;
      left: 0;
    }
    &::after {
      border-radius: 20rpx 0 0 20rpx;

      right: 0;
    }
    .iconfont {
      padding: 20rpx 30rpx;
      font-size: 46rpx;
      font-weight: bold;
      color: #444;
    }
  }
  .modal-close {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    margin: 50rpx auto 0;
    position: relative;
    &::before,
    &::after {
      content: '';
      width: 28rpx;
      height: 2rpx;
      position: absolute;
      background: #fff;
      top: 18rpx;
      left: 6rpx;
    }
    &::before {
      transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
    }
  }
}
</style>